<template>
  <div id="app">
    <!-- <vue-particles id="tsparticles" @particles-loaded="particlesLoaded" url="http://foo.bar/particles.json" /> -->

    <vue-particles id="tsparticles" @particles-loaded="particlesLoaded" :options="options" />
  </div>
</template>

<script setup lang="ts" name="">
let options = {
  // 背景
  background: {
    // 颜色
    color: { 
      value: '#2ec5d2',
    },
  },
  // 每秒帧数限制
  fpsLimit: 120,
  interactivity: {
    // 用户交互
    events: {
      // 点击事件
      onClick: {
        enable: true, // 启用
        mode: 'push', // 触发模式，push、remove、bubble
      },
      // 悬停事件
      onHover: {
        enable: true,
        mode: 'repulse',
      },
    },
    // 交互模式配置
    modes: {
      // 泡泡效果
      bubble: {
        distance: 400, // 泡泡距离
        duration: 2, // 持续时间
        opacity: 0.8, // 透明度
        size: 40, // 大小
      },
      // 推动效果
      push: {
        quantity: 4, // 点击新增离子数量
      },
      // 排斥效果
      repulse: {
        distance: 200, // 排斥距离
        duration: 0.4, // 持续时间
      },
    },
  },
  particles: {
    // 粒子颜色
    color: {
      value: '#ffffff',
    },
    // 粒子连线 
    links: {
      color: '#ffffff', // 连线颜色
      distance: 150, // 显示连线最小距离
      enable: true, // 启用粒子连线
      opacity: 0.5, // 连线透明度
      width: 1, // 连线宽度
    },
    // 粒子移动
    move: {
      direction: 'none', // 移动方向
      enable: true, // 启用粒子移动
      outModes: 'bounce', // 粒子移出画布处理方式
      random: false, // 是否随机速度
      speed: 6, // 移动速度
      straight: false, // 是否直线运动
    },
    // 粒子数量
    number: {
      // 密度
      density: {
        enable: true, // 是否根据密度自动调整粒子数量
      },
      // 固定数量
      value: 80,
    },
    // 粒子透明度 
    opacity: {
      value: 0.5, 
    },
    // 粒子形状
    shape: {
      type: 'circle', // 类型circle、image、star
    },
    // 粒子大小
    size: {
      value: { min: 1, max: 5 }, // 粒子大小范围
    },
  },
  // 是否检测视网膜屏幕并相应调整粒子大小已适应高分辨率显示器
  detectRetina: true,
}
// particles完成加载
const particlesLoaded = async (container: any) => {
  console.log('Particles container loaded', container)
}
</script>

<style lang="scss" scoped></style>
